<!-- 本页数据在72行，list.value -->
<template>
  <div>
    <el-card class="optionTable" shadow="hover">
      <div class="search">
            <el-popover
                placement="bottom"
                title="检索结果"
                width="50%"
                :visible="visible"
            >
                <template #reference>
                    <el-input
                        v-model="searchText"
                        class="w-50 m-2"
                        placeholder="请输入关键字"
                        :prefix-icon="Search"
                        type="search"
                        size="large"
                        @input="visible=true"
                        @blur="visible= false"
                    />
                </template>

                <div v-if="searchlist.length">
                    <div
                        v-for="data in searchlist"
                        :key="data.id"
                        class="search-item"
                        @click="handleChangepage(data.id)"
                    >
                        {{data.title}}
                    </div>
                </div>
                <div v-else>
                    <el-empty
                        description="暂无"
                        :image-size="50"
                    />

                </div>
          </el-popover>
        </div>
      <div>
        <el-col>
          <span style="margin-right:10px">专业</span>
          
          <el-select v-model="tableOptions.majorChoice" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in majorTable"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </div>

      <div>
        <el-col>
          <span style="margin-right:10px">职业</span>
          
          <el-select v-model="tableOptions.jobChoice" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in jobTable"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </div>

      <div class="mb-4" gutter="20">
        <el-button type="primary" @click="handleChange">查询</el-button>
        <el-button type="primary" @click="handleGetAll">查询所有</el-button>
      </div>


    </el-card>

    <el-card class="optionTable" shadow="hover">
      
      <h3>筛选结果</h3>
      <el-row :gutter="20">
        <el-col :span="22" style="padding: 0px;margin: 0;">
          <div v-for="data in list" :key="data.id" style="padding:10px;">
            <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="handleChangepage(data.id)">
              <div style="padding: 14px;float:left;">
                <span>{{ data.title }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex'
import axios from 'axios'
import router from '@/router';
import { onMounted } from "vue";
const dialogVisible = ref(false);
const store = useStore()
const searchText = ref("");
onMounted(async() => {
  let allData = await axios.get("/article/getAll")
  console.log(allData)
  list.value = allData.data.data
});
let list = ref([])
list.value = [
    {
        id:1,
        title:"加载中...",
        content:"就业1",
        category:"1",
        author:"1",
        job:"job1",
        major:"major1"
    },
    {
        id:2,
        title:"加载中...",
        content:"面试1",
        category:"2",
        author:"2",
        job:"job1",
        major:"major1"
    },
    {
        id:3,
        title:"加载中...",
        content:"简历1",
        category:"3",
        author:"3",
        job:"job2",
        major:"major2"
    }
  ]
const majorTable = [
  { label: '不限', value: '' },
  { label: '专业1', value: 'major1'},
  { label: '专业2', value: 'major2' }
];

const jobTable = [
  { label: '不限', value: '' },
  { label: '职业1', value: 'job1' },
  { label: '职业2', value: 'job2' }
];

const searchlist = computed(
  () =>
    searchText.value
      ? list.value.filter(item => item.title.includes(searchText.value))
      : []
);

let tableOptions = reactive({
  majorChoice: '',
  jobChoice: ''
});

const handleChange = async() => {
  let job_category = tableOptions.jobChoice
  let major_category = tableOptions.majorChoice
  console.log(job_category,major_category)
  let siftedData = await axios.get(`/article/findByCategory?job_category=${job_category}&major_category=${major_category}`)
  console.log(siftedData)
  list.value = siftedData.data.data
}

const handleChangepage = (id)=>{
  router.push(`information/${id}`)
}

const handleGetAll = async()=>{
  //获取所有
  let allData = await axios.get("/article/getAll")
  console.log(allData)
  list.value = allData.data.data
}



</script>

<style  scoped lang="scss">
.optionTable {
  margin: 30px;
}

.el-col {
  margin: 10px
}

.image {
  width: 100%;
  height: 200px;
  background-size: cover;
}

.image-preview {
  width: 70%;
  height: 280px;
  background-size: cover;
}

.search {
//   position: absolute;
  top: 10px;
  height: 20px;
  width: 100%;
  text-align: right;
  .el-input {
    width: 50%;
  }
}

.search-item {
  height: 50px;
  line-height: 50px;
  &:hover {
    background: whitesmoke;
    color: grey;
  }
}
</style>